<template>
  <div>

    <div id="myChart" :style="{width: '100%', height: '300px',margin:'0px auto'}"></div>
    <div id="myChart1" :style="{width: '100%', height: '200px'}"></div>
    <!-- <div id="myChart2"></div> -->
  </div>
</template>
<script>
export default {
  name: 'hello',
  data() {
    return {
      dataAxis: ['jc', 'lx', 'tjc', 'bzm', 'jp', 'wfl'],
      data: [220, 182, 220, 182, 220, 182],
      data1: [],
      dataAxis1: [],
      table: [
        {
          name: 'wfl'
        },
        {
          name: 'lx'
        },
        {
          name: 'jc'
        },
        {
          name: 'tjc'
        }
      ],
      sjname: 'wfl',
      data2: [{
        name: 'Apples',
        value: 70
      },
      {
        name: 'Strawberries',
        value: 68
      },
      {
        name: 'Bananas',
        value: 48
      },
      {
        name: 'Oranges',
        value: 40
      },
      {
        name: 'Pears',
        value: 32
      },
      {
        name: 'Pineapples',
        value: 27
      },
      {
        name: 'Grapes',
        value: 18
      }],
      data3: [{
        name: 'Apples',
        value: 70
      },
      {
        name: 'Strawberries',
        value: 68
      },
      {
        name: 'Bananas',
        value: 48
      },
      {
        name: 'Oranges',
        value: 40
      },
      {
        name: 'Pears',
        value: 32
      },
      {
        name: 'Pineapples',
        value: 27
      },
      {
        name: 'Grapes',
        value: 18
      }]
    }
  },
  mounted() {
    // vue进去首次刷新页面

    // if (location.href.indexOf("#reloaded") <= 0) {
    //   location.href = location.href + "#reloaded";
      
    //   location.reload();
    // }


    this.sjname = this.table[Math.floor(Math.random() * 4)].name
    this.dataAxis1 = this.dataAxis.sort(() => Math.random() - 0.5)
    this.data1 = this.data.sort(() => Math.random() - 0.5)
    this.drawLine()
    this.drawLine1()
  },
  methods: {
    drawLine() {

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.sjname + '--图表',
          left: 'center'
          // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          data: this.dataAxis1,
          axisLabel: {
            inside: true,
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: this.data1
          }
        ]
      });

    },
    drawLine1() {

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        title: [
          {
            text: '圆型图表',
            left: 'center'
          },
          {
            subtext: '图表1',
            left: '33%',
            top: '80%',
            textAlign: 'center'
          },
          {
            subtext: '图表2',
            right: '30%',
            top: '80%',
            textAlign: 'center'
          }
        ],
        series: [
          {
            type: 'pie',
            radius: '35%',
            center: ['50%', '50%'],
            data: this.data3,
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5
            },
            left: 0,
            right: '33%',
            top: 0,
            bottom: 0
          },
          {
            type: 'pie',
            radius: '35%',
            center: ['50%', '50%'],
            data: this.data2,
            label: {
              position: 'outer',
              alignTo: 'labelLine',
              bleedMargin: 5
            },
            left: '30%',
            right: 0,
            top: 0,
            bottom: 0
          },
        ]
      });
    }
  }
}
</script>
<style>
</style>